<template>
  <div class="bili-emoji-picker--visible">
    <div class="bili-emoji-picker__header">小黄脸</div>
    <div class="bili-emoji-picker__body">
      <div class="bili-emoji-picker__content">
        <el-scrollbar>
        <!-- 表情框 -->
        <div class="bili-emoji-picker__emoji img" style="height:24px" data-idx="0" v-for="value in 80">
          <img width="24" height="24" src="/public/emo/1.png" alt="[doge_金箍]">
        </div>
        </el-scrollbar>
      </div>
      <div class="bili-emoji-picker__footer">
        <div class="bili-emoji-picker__tabs">
          <div class="bili-emoji-picker__tabs-track" >
            <div class="bili-emoji-picker__tab" 
            v-for="item in emojiList" 
            :key="item.id"
            :class="emoctionIndex === item.id?'is-active':''"
            @click="emoctionIndex=item.id">
              <img width="22" height="22" :src="item.url" alt="小黄脸">
            </div>
          </div>
        </div>
        <div class="bili-emoji-picker__nav">
          <button class="disabled">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M5.813113333333334 2.1464466666666664C5.617853333333334 2.3417133333333333 5.617853333333334 2.658293333333333 5.813113333333334 2.853553333333333L10.723866666666666 7.7642999999999995C10.854033333333334 7.894499999999999 10.854033333333334 8.1055 10.723866666666666 8.2357L5.813113333333334 13.146433333333334C5.617853333333334 13.3417 5.617853333333334 13.658299999999999 5.813113333333334 13.853566666666666C6.00838 14.0488 6.324966666666667 14.0488 6.520226666666667 13.853566666666666L11.430966666666666 8.942799999999998C11.951666666666664 8.4221 11.951666666666664 7.5779 11.430966666666666 7.0572L6.520226666666667 2.1464466666666664C6.324966666666667 1.9511866666666666 6.00838 1.9511866666666666 5.813113333333334 2.1464466666666664z" fill="currentColor"></path></svg>
          </button>
          <button class="disabled">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><path d="M5.813113333333334 2.1464466666666664C5.617853333333334 2.3417133333333333 5.617853333333334 2.658293333333333 5.813113333333334 2.853553333333333L10.723866666666666 7.7642999999999995C10.854033333333334 7.894499999999999 10.854033333333334 8.1055 10.723866666666666 8.2357L5.813113333333334 13.146433333333334C5.617853333333334 13.3417 5.617853333333334 13.658299999999999 5.813113333333334 13.853566666666666C6.00838 14.0488 6.324966666666667 14.0488 6.520226666666667 13.853566666666666L11.430966666666666 8.942799999999998C11.951666666666664 8.4221 11.951666666666664 7.5779 11.430966666666666 7.0572L6.520226666666667 2.1464466666666664C6.324966666666667 1.9511866666666666 6.00838 1.9511866666666666 5.813113333333334 2.1464466666666664z" fill="currentColor"></path></svg>
          </button>
        </div>
      </div>
    </div>

  
  </div>

</template>
<script setup>
import { reactive, ref } from 'vue';
//表情包列表
const emoclist1 = ref([])
const emoclist2 = ref([])
//表情包种类
const emojiList = reactive([
  {
    id: 1,
    url:"/public/emo/1.png"
  },{
    id: 2,
    url:"/public/emo/2.png"
  }
])
//当前表情包种类索引
const emoctionIndex = ref(1)



</script>
<style scoped>
.bili-emoji-picker--visible {
    display: block;
    padding-top: 10px;
}
.bili-emoji-picker__header {
    padding: 1px 15px 6px 5px;
    box-sizing: border-box;
    line-height: 17px;
    margin-left: 7px;
}
.bili-emoji-picker__body {
    height: 230px;
}
.bili-emoji-picker__content {
    height:calc(100% - 36px);
    padding: 2px 4px 5px 7px;
    background-color: #FFFFFF;
    overflow: auto;
}
.bili-emoji-picker__emoji.img {
    box-sizing: content-box;
    padding: 4px;
    /* border: 1px solid red; */
}
.bili-emoji-picker__emoji {
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}
.bili-emoji-picker__emoji:hover{
    background: #E3E5E7;
}
.bili-emoji-picker__footer {
    background-color: #F1F2F3;
    box-sizing: border-box;
    height: 36px;
    display: flex;
    margin-bottom: 0;
    border-radius: 0 0 8px 8px;
}
.bili-emoji-picker__tabs {
    height: 100%;
    width: 270px;
    overflow: hidden;
}
.bili-emoji-picker__tabs-track {
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
    display: flex;
    flex-wrap: no-wrap;
    height: 100%;
    
}
/* 该表情包类下的背景颜色 */
.bili-emoji-picker__tab.is-active {
    background-color: #FFFFFF;
    border-radius: 0 0 0 8px;
}
.bili-emoji-picker__tab {
    user-select: none;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 100%;
    cursor: pointer;
    /* border: 1px solid red; */
}
.bili-emoji-picker__nav {
    height: 100%;
    width: 73px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /* border: 1px solid gold; */
}
.bili-emoji-picker__nav button.disabled {
    color: #9499A0;
}
.bili-emoji-picker__nav button {
    width: 36px;
    height: 100%;
    color: #61666D;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: color 0.2s;
}
.bili-emoji-picker__nav button:first-child {
    transform: rotateZ(180deg);
}
</style>